﻿<%@ Page Title="Portlets" Language="C#" MasterPageFile="~/Demo.master" Inherits="DemoPage"
    StylesheetTheme="start" %>

<%@ Register Src="~/CodeFormatter.ascx" TagName="Code" TagPrefix="demo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="DemoHolder" runat="Server">
    <div class="dna-state-help ui-corner-all" style="margin-bottom: 10px;">
        Enable CollapsablePanel as sortables and use the <b>ConnectWith</b> property to allow sorting
        between columns.
        <p style="color: red">
            This sample do not need to write any code,just drag and drop the controls from toolbox
            and set some property in Vistual Studio.
        </p>
    </div>
    <br />
    <style type="text/css">
        .column { width: 170px; float: left; padding-bottom: 100px; }
        .portlet { margin: 0 1em 1em 0; }
        .portlet div { padding: 5px; }
        .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
        .ui-sortable-placeholder * { visibility: hidden; }
    </style>
    <asp:Panel runat="server" ID="Panel1" CssClass="column">
        <DotNetAge:CollapsablePanel ID="CollapsablePanel1" runat="server" Title="Feeds" CssClass="portlet">
            <ContentTempalte>
                <ul class="ui-helper-reset">
                    <li>DNA DJ v1.1.15 is release</li>
                    <li>DNA DJ v1.0.0 beta is release</li>
                </ul>
            </ContentTempalte>
        </DotNetAge:CollapsablePanel>
        <DotNetAge:CollapsablePanel ID="CollapsablePanel2" runat="server" Title="News" CssClass="portlet">
            <ContentTempalte>
                <ul class="ui-helper-reset" style="font-size: 8pt">
                    <li>2009/4/14 Community is published</li>
                    <li>2009/4/15 WiKi is published</li>
                    <li>2009/5/30 DevCenter is published</li>
                </ul>
            </ContentTempalte>
        </DotNetAge:CollapsablePanel>
    </asp:Panel>
    <asp:Panel runat="server" ID="Panel8" CssClass="column">
        <DotNetAge:CollapsablePanel ID="CollapsablePanel3" runat="server" CssClass="portlet"
            Title="Downloads">
            <ContentTempalte>
                <div style="position: relative;">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/ui_icon_download.jpg" />
                    <span style="position: absolute; float: left;">version:1.1.15</span>
                </div>
                </table>
            </ContentTempalte>
        </DotNetAge:CollapsablePanel>
    </asp:Panel>
    <asp:Panel runat="server" ID="Panel12" CssClass="column">
        <DotNetAge:CollapsablePanel ID="CollapsablePanel4" runat="server" CssClass="portlet"
            Title="Links">
            <ContentTempalte>
                <ul class="ui-helper-reset">
                    <li>
                        <asp:HyperLink runat="server" NavigateUrl="http://www.asp.net">ASP.NET</asp:HyperLink></li>
                    <li>
                        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://www.microsoft.com">Microsoft</asp:HyperLink></li>
                    <li>
                        <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="http://www.jquery.com">jQuery</asp:HyperLink></li>
                    <li>
                        <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="http://ui.jquery.com">jQuery ui</asp:HyperLink></li>
                </ul>
            </ContentTempalte>
        </DotNetAge:CollapsablePanel>
    </asp:Panel>
    <DotNetAge:Sortable ID="Sortable1" runat="server">
        <Target Selector=".column" />
        <ConnectWith Selector=".column" />
    </DotNetAge:Sortable>
    <div style="clear: left; margin-top: 5px;">
    </div>
    <br />
    <demo:Code runat="server" ID="codeView" SourceFile="~/Sortable/Codes/Portalets.aspx" />
</asp:Content>
